<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>二手交易平台</title>
  <link rel="stylesheet" type="text/css" href="/ssm/consumer/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/ssm/consumer/res/layui/css/layui.css">
  <script type="text/javascript" src="/ssm/consumer/res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<link href="/ssm/static/plugins/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="/ssm/static/plugins/ueditor/third-party/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="/ssm/static/plugins/ueditor/umeditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="/ssm/static/plugins/ueditor/umeditor.min.js"></script>
	<script type="text/javascript" src="/ssm/static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
	  
   <link rel="stylesheet" href="/ssm/static/system/layui/css/layui.css"
          media="all" />
  <style type="text/css">
  	.userNotLogin{
  		display: none;
  	}
	
	.layui-form-label {
	    float: left;
	    display: block;
	    padding: 9px 15px;
	    width: 180px;
	    font-weight: 400;
	    line-height: 20px;
	    text-align: right;
	}
	.layui-form-item .layui-input-inline {
	    float: left;
	    width: 390px;
	    margin-right: 10px;
	}
	.layui-upload-img {
    width: 92px;
    height: 92px;
    margin: 0 10px 10px 0;
}
  </style>
</head>
<body>
 <form id="editForm" class="layui-form model-form" action="">
        <input id="id" type="hidden" value=""/>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  			<legend>基础信息</legend>
		</fieldset>
		<div class="layui-form-item">
			<div class="layui-inline">
            	<label class="layui-form-label">商品名称：</label>
            	<div class="layui-input-inline">
                	<input id="pname" autocomplete="off" placeholder="请输入商品名称"  type="text" class="layui-input"  lay-verify="required" required />
            	</div>
			</div>
			<div class="layui-form-item">
            <label class="layui-form-label">商品分类：</label>
            <div class="layui-input-inline">
				<select id="cid" name="modules" lay-search="">
					<option value="0">请选择</option>
				</select>
            </div>
        </div>

			<div class="layui-inline">
            	<label class="layui-form-label">商城价：</label>
            	<div class="layui-input-inline">
                	<input id="estoreprice" autocomplete="off" placeholder="请输入商城价"  type="text" class="layui-input"  lay-verify="required" required />
            	</div>
			</div>
        </div>
        <div class="layui-form-item">
			<div class="layui-inline">
            	<label class="layui-form-label">市场价：</label>
            	<div class="layui-input-inline">
                	<input id="markprice" autocomplete="off" placeholder="请输入市场价"  type="text" class="layui-input"  lay-verify="required" required />
            	</div>
			</div>
        </div>
		<div class="layui-form-item" id="initPnum">
			<div class="layui-inline">
            	<label class="layui-form-label">初始库存：</label>
            	<div class="layui-input-inline">
                	<input id="pnum" autocomplete="off" placeholder="请输入商品初始库存"  type="text" class="layui-input"  lay-verify="required" required />
            	</div>
			</div>
        </div>

		<div class="layui-form-item">
			<div class="layui-inline">
            	<label class="layui-form-label">商品图片：</label>
            	<div class="layui-input-inline">
				<input type="hidden" id="banner_path" />
					<div class="layui-upload">
					  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
					  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
					    预览图：
					    <div class="layui-upload-list" id="demo2"></div>
					 </blockquote>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
            	<label class="layui-form-label">商品详情：</label>
            	<div class="layui-input-inline">
					<script type="text/plain" id="myEditor"  style="width: 390px;height: 240px;text-align: left;" >
						<p>&nbsp;&nbsp;</p>
					</script>
				</div>
			</div>
		</div>
		
		 <div class="layui-form-item model-form-footer" style="text-align: center;">
            <button class="layui-btn" lay-filter="btnSubmit" lay-submit>保存</button>
        </div>
    </form>
    <script type="text/javascript" src="/ssm/consumer/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript"
        src="/ssm/static/system/layui/layui.js"></script>
   <script>
   layui.use(['form','table','element','laytpl','layer','upload','laydate'], function() {
	   var table = layui.table;
	   var form = layui.form;
	   var laydate = layui.laydate;
	   var upload = layui.upload;
		   upload.render({
		  		elem : '#uploader',
		  		url : '/ssm/file/uploadImage.do',
		  		done : function(res) {
		  			if (res.code == '01') {
		  				$("#uploader")
		  						.html(
		  								"<img src='" + res.body + "' style='width: 100px;height: 130px;'/><p>点击重新上传，或将文件拖拽到此处</p>");
		  				$("#banner_path").val(res.body);
		  			} else {
		  				layer.alert("上传失败");
		  			}s
		  		}
		  	});
		      upload.render({
		    		elem : '#uploader2',
		    		url : '/ssm/file/uploadImage.do',
		    		done : function(res) {
		    			if (res.code == '01') {
		    				$("#uploader2")
		    						.html(
		    								"<img src='" + res.body + "' style='width: 100px;height: 130px;'/><p>点击重新上传，或将文件拖拽到此处</p>");
		    				$("#description").val(res.body);
		    			} else {
		    				layer.alert("上传失败");
		    			}
		    		}
		    	});
		      
		      upload.render({
		    	    elem: '#test2'
		    	    ,url: '/ssm/file/uploadImage.do' //改成您自己的上传接口
		    	    ,multiple: true
		    	    ,before: function(obj){
		    	      //预读本地文件示例，不支持ie8
		    	      $('#demo2').empty();
		    	      $("#editForm input[id=banner_path]").val("");
		    	      obj.preview(function(index, file, result){
		    	        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
		    	      });
		    	    }
		    	    ,done: function(res){
		    	      //上传完毕
		    	        $("#editForm input[id=banner_path]").val($("#editForm input[id=banner_path]").val()+res.body+",");
		    	    }
		    	  });
		      
		      loadAllclasses();
		      
		      if(getQueryString("id")){
		    	  var postData = {
		  				page:1,
		  				limit:100,
		  				pid:getQueryString("id"),
		  			}
		    	  $.post('/ssm/product/queryList.do',postData,function(data){
		  			console.log(data);
		  			for(var idx in data.body.list){
		  				var productItem = data.body.list[idx];
		  				 if(productItem!=null){
				      	setTimeout(function(){
				      		$("#initPnum").hide();
					            $("#editForm input[id=id]").val(productItem.pid);
					            $("#editForm input[id=pname]").val(productItem.pname);
					            $("#editForm select[id=cid]").val(productItem.cid);
					            $("#editForm input[id=estoreprice]").val(productItem.estoreprice);
					            $("#editForm input[id=markprice]").val(productItem.markprice);
					            $("#editForm input[id=pnum]").val(productItem.pnum);
					            um.setContent(productItem.description);
					            $("#editForm input[id=banner_path]").val(productItem.imgurl);
					            var imgs = productItem.imgurl.split(",");
					            for(var idx in imgs){
					            	$('#demo2').append('<img src="'+ imgs[idx] +'" alt="" class="layui-upload-img">')
					            }
					            
					            form.render('select');
				      	},1000)
				      }
		  			}
		  			
		  		})
		    	  
		      }
		      
		   	//表单提交事件
		      layui.form.on('submit(btnSubmit)', function(data){
		      		var postData = {
		      				pid : $("#id").val(),
		      				pname : $("#pname").val(),
		      				cid : $("#cid").val(),
		      				estoreprice : $("#estoreprice").val(),
		      				markprice : $("#markprice").val(),
		      				pnum : $("#pnum").val(),
		      				description : um.getContent(),
		      				imgurl : $("#banner_path").val(),
		      		}
		              var qUrl="/ssm/product/save.do";
		              $.post(qUrl,postData,function(res){
		               if(res.code=="01"){
		                   layer.closeAll();
		                   layer.msg("保存成功");
		                   //刷新父页面
		                   layui.table.reload('supplierTable', {});
		               }else{
		                   layer.msg("保存失败");
		               }
		           });
		              return false;
		      });

		      
		      function loadAllclasses(){
		  		var postData = {
		  				notPid :0
		  		}
		          $.get('/ssm/classes/queryList.do',postData,function(res){
		                  data= res.body;
		                  for(var idx in data){
		                       var optionElement = document.createElement("option");
		                       optionElement.setAttribute("value",data[idx].cid);
		                       optionElement.text = (data[idx].cname);
		                      document.getElementById("cid").append(optionElement);
		                   }
		                  form.render('select');
		              })
		      }
		      
		      function getQueryString(name) {
		  	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		  	    var r = window.location.search.substr(1).match(reg);
		  	    if (r != null) return decodeURI(r[2]); return null;
		  	} 
		      var um = UM.getEditor('myEditor');	      
   })
   </script>
   <script type="text/javascript">
	</script>
</body>
</html>